import React, {Component} from 'react';
import {
    Form,
    Select,
    Input
} from 'antd'
import PropTypes from "prop-types";
const Item = Form.Item
const Option = Select.Option
class AddForm extends Component {
    myRef = React.createRef();
    mySelect = React.createRef()
    static propTypes={
        categorys: PropTypes.array.isRequired,
        parentId: PropTypes.string.isRequired,
        setForm: PropTypes.func.isRequired
    }
    handleChange= (value)=>{
        this.parentId = value
    }
    change = ()=> {
        // console.log(this.parentId?this.parentId:this.props.parentId,this.myRef.current.state.value)
        this.props.setForm({categoryName:this.myRef.current.state.value,
            parentId:this.parentId?this.parentId:this.props.parentId})
    }
    render() {
        return (
            <Form>
                <Item>
                    <Select ref={this.mySelect} defaultValue={this.props.parentId} onChange={this.handleChange} style={{width:470}}>
                        <Option value={'0'}>一级分类</Option>
                        {
                            this.props.categorys.map(
                                c=>(
                                    <Option value={c._id}>{c.name}</Option>
                                )
                            )
                        }
                    </Select>
                </Item >
                <Item
                    name="category"
                    rules={[
                    {
                        required: true,
                        message: 'Please input',
                    },
                ]}>
                    <Input ref={this.myRef} onBlur={this.change} placeholder='请输入分类名称' />
                </Item>

            </Form>
        );
    }
}

export default AddForm;